<template>
  <div class="registered-container accessmanagement appMainWarp">
    <el-table
      ref="table"
      v-loading="page.tableLoading"
      center
      class="accessmanagementTable"
      :data="treeTable"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'child', hasChildren: 'hasChildren'}"
      stripe
    >
      <el-table-column label="权限结构" align="left">
        <template slot-scope="scope">{{ scope.row.name ||'-' }}</template>
      </el-table-column>

      <el-table-column label="访问地址" align="center">
        <template slot-scope="scope">{{ scope.row.url ||'-' }}</template>
      </el-table-column>
      <el-table-column label="icon" align="center">
        <template slot-scope="scope">{{ scope.row.icon ||'-' }}</template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-link
            v-if="scope.row.pid!=2"
            :underline="false"
            type="success"
            @click="addRouter(scope.row)"
          >{{ scope.row.pid==0?'添加模块':'添加节点' }}</el-link>&nbsp;&nbsp;&nbsp;&nbsp;
          <el-link :underline="false" type="primary" @click="weiteRouter(scope.row)">修改</el-link>&nbsp;&nbsp;&nbsp;&nbsp;
          <el-link
            v-if="scope.row.id!='1'"
            :underline="false"
            type="danger"
            @click="removeRouter(scope.row)"
          >删除</el-link>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="addModel.item.id?'修改权限':'添加权限'" :visible.sync="addModel.flag" width="700px">
      <el-form ref="addModel" :model="addModel.item" label-width="100px">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="addModel.item.name" placeholder="请输入内容" autocomplete="off" />
        </el-form-item>
        <el-form-item label="icon" prop="name">
          <el-input v-model="addModel.item.icon" placeholder="请输入icon名称" autocomplete="off" />
        </el-form-item>
        <el-form-item label="访问地址" prop="url">
          <el-input v-model="addModel.item.url" placeholder="请输入内容" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addModel.flag = false">取 消</el-button>
        <el-button type="primary" @click="checkChange">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  ApiAdminTreeList,
  ApiAdminTreeAddTree,
  ApiAdminTreeDeleteTree,
  ApiAdminTreeUpdateTree
} from '@/api/systemManagement/accessManagement/index'
const defaultAddMode = {
  id: '',
  name: '',
  pid: '', // 父标识
  url: '', // 访问地址
  icon: ''
}
export default {
  name: 'Accessmanagement',
  components: {},
  data() {
    return {
      pidList: [],
      treeTable: [],
      addModel: {
        flag: false,
        item: Object.assign({}, defaultAddMode)
      },
      page: {
        tableLoading: false,
        currentPage: 1,
        pageSize: 20,
        totalRow: 0,
        totalPage: 0
      }
    }
  },
  created() {
    this.ApiAdminTreeList()
  },
  methods: {
    arrayToTree(list, pid = 0) {
      return list
        .filter(item => parseInt(item.pid) === parseInt(pid))
        .map(item => ({
          ...item,
          children: this.arrayToTree(list, item.id)
        }))
    },
    ApiAdminTreeList() {
      var params = {}
      var that = this
      that.page.tableLoading = true
      ApiAdminTreeList(params)
        .then(res => {
          that.page.tableLoading = false
          that.treeTable = res.data
        })
        .catch(() => {
          that.page.tableLoading = true
        })
    },

    checkChange() {
      var params = {}
      var that = this
      if (that.addModel.item.id) {
        params.id = that.addModel.item.id
      }
      params.pid = that.addModel.item.pid
      params.name = that.addModel.item.name
      params.url = that.addModel.item.url
      params.icon = that.addModel.item.icon

      if (!params.name) {
        this.$message({
          type: 'warning',
          message: '菜单名称不能为空'
        })
        return false
      }

      if (!params.url) {
        this.$message({
          type: 'warning',
          message: '访问地址不能为空'
        })
        return false
      }
      if (!params.icon) {
        this.$message({
          type: 'warning',
          message: 'icon不能为空'
        })
        return false
      }

      if (this.addModel.item.id) {
        this.ApiAdminTreeUpdateTree(params)
      } else {
        this.addModelSubmit(params)
      }
    },
    ApiAdminTreeUpdateTree(params) {
      var that = this
      const loading = this.$loading()
      ApiAdminTreeUpdateTree(params)
        .then(res => {
          loading.close()
          that.addModel.flag = false
          that.ApiAdminTreeList()
        })
        .catch(() => {
          loading.close()
        })
    },
    addModelSubmit(params) {
      var that = this
      const loading = this.$loading()
      ApiAdminTreeAddTree(params)
        .then(res => {
          loading.close()
          that.addModel.flag = false
          that.ApiAdminTreeList()
        })
        .catch(() => {
          loading.close()
        })
    },
    addRouter(row) {
      var that = this
      this.addModel.item = Object.assign({}, defaultAddMode)
      that.addModel.item.pid = row.id
      that.addModel.flag = true
    },

    weiteRouter(row) {
      var that = this
      const obj = {}
      obj.name = row.name
      obj.pid = row.pid
      obj.url = row.url
      obj.id = row.id
      obj.icon = row.icon
      that.addModel.item = Object.assign({}, obj)
      that.addModel.flag = true
    },
    removeRouter(row) {
      var params = {}
      var that = this
      params.id = row.id
      this.$confirm('确定要删除权限吗！', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading()
        ApiAdminTreeDeleteTree(params)
          .then(res => {
            loading.close()
            that.ApiAdminTreeList()
          })
          .catch(() => {
            loading.close()
          })
      })
    }
  }
}
</script>

<style>
.accessmanagement .el-table--medium td {
  text-align: inherit;
}

.accessmanagement .el-table--medium .is-center {
  text-align: center;
}
</style>
